<template>
  <div class="page" v-loading="loading">  
    <ekList :layoutData="layoutData" v-if="loaded" ></ekList>
  </div>
</template>

<script setup>
import {
  
  defineComponent,
  onMounted,
  getCurrentInstance,
  ref,
} from "vue";
import { useStore } from "vuex";
import { useRoute } from "vue-router";
import ekList from '@/components/business/ekList/index.vue';

const {
  appContext: {
    config: { globalProperties },
  },
} = getCurrentInstance();
const { $storage, $http } = globalProperties;
const store = useStore();
const route = useRoute()

let params = route.params;
if(params.modelCode){
  init(params.modelCode);
}
// 表格头部
let layoutData = ref({});
let loaded = ref(false);
let loading = ref(true);
function init(modelCode){
  let modelCodeMapping = {
    'MODEL_DEMO':'/json/demoList.json',
    'MODEL_DEPARTMENT':'/json/departmentList.json',
    'MODEL_BUSINESS_ROLE':'/json/demoRole.json',
  }
  fetch(modelCodeMapping[modelCode])
  .then(response => {
      if (!response.ok) {
        throw new Error('Network response was not ok ' + response.statusText);
      }
      return response.json();
    })
    .then(data => {
      layoutData.value = data;
      console.log(data,'layoutDatalayoutDatalayoutData')
      loaded.value = true;
      loading.value = false;
    })
    .catch(error => {
    });

}
// TODO
/**
 * 字段在多功能列表上显示配置，加上字段类型type
 * (1)默认text,文本显示不支持操作
 * (2)input，支持单个值修改
 * (3)switch,开关
 * (4)detail,打开另外一个详情
 * 
 */

/**
 * 自定义操作按钮可以是打开一个新组件
 * 也可以是一个业务逻辑
 */
</script>

<style scoped lang="scss">
.page {
  width: 100%;
  height: 100%;
}
</style>
